Skip to main content
Version: 4.2

General Property Configuration of Charts

The supOS platform enables you to configure charts in business designer through scripts, which can be helpful when the provided configuration items do not meet your requirements.

General Property

  • Data Source and Others
PropertyDescriptionTypeDefaultSet ValueGet Value
Data sourcearraysetDataSourcegetDataSource
Time formatDo not convert (cannot convert when data source is object property)booleanfalsesetInitFormatgetInitFormat
Component IDstringgetCtrlId
  • Title
    • Main title
      PropertyDescriptionTypeDefaultSet ValueGet Value
      DisplayWhether to display titlebooleantruesetTitleVisibilitygetTitleVisibility
      Main titlestringsetTitlegetTitle
      Text styleobject
      { fontSize = 16, fontFamily = 'Arial', color ='#333333', fontWeight, fontStyle }
      setChartTitlegetChartTitle
      Alignmentstring

      'center'('center'|'left'|'right')

      setChartAligngetChartAlign
    • Subtitle
      PropertyDescriptionTypeDefaultSet ValueGet Value
      DisplayWhether to display sub titlebooleantruesetSubtitleVisibilitygetSubtitleVisibility
      Sub titlestringsetSubtitlegetSubtitle
      Text styleobject
      { fontSize = 12, fontFamily = 'Arial', color ='#333333', fontWeight, fontStyle }
      setSubChartTitlegetSubChartTitle
      Alignmentstring

      'center'('center'|'left'|'right')

      setSubChartAligngetSubChartAlign
  • Basic Property
PropertyTypeDefaultSet ValueGet Value
Borderobject
{borderWidth:0, borderColor:'#ddd', borderRadius:0
}
setBaseBorderStylegetBaseBorderStyle
Marginobject
{spacingTop:10, spacingBottom:10, spacingLeft:10,
spacingRight:10}
setBaseBoxSpacinggetBaseBoxSpacing
Background colorstring

'rgba(0, 0, 0, 0)'

setBackgroundColorgetBackgroundColor
Chart colorstring

'rgba(0, 0, 0, 0)'

setPlotBackgroundColorgetPlotBackgroundColor
Display levelnumber100setChartZIndexgetChartZIndex
Full screenbooleanfalsesetFullscreenIcogetFullscreenIcon
  • Legend
PropertyTypeDefaultSet ValueGet Value
DisplaybooleanfalsesetLegendEnabledgetLegendEnabled
Borderobject
{borderWidth:0, borderColor:'#ddd', borderRadius:0
}
setLegendBorderStylegetLegendBorderStyle
Alignmentstring

'bottom-center'

setLegendAligngetLegendAlign
Layoutstring

'horizontal'

setLegendLayoutgetLegendLayout
Text styleobject
{fontSize:16, fontFamily:'Arial', color:'#333333',
fontWeight, fontStyle}
setLegendTextgetLegendText
Background colorstring

'#fff'

setLegendItemBackgroundColorgetLegendItemBackgroundColor
  • Label
info

Dash chart and speedometer are excluded.

PropertyTypeDefaultSet ValueGet Value
DisplaybooleanfalsesetDataLabelsEnabledgetDataLabelsEnabled
Borderobject
{borderWidth:0, borderColor:'#ddd', borderRadius:0
}
setDataLabelsBorderStylegetDataLabelsBorderStyle
Label colorstring

'#000'

setDataLabelsColorgetDataLabelsColor
Background colorstring

'#ddd'

setDataLabelsBackgroundColorgetDataLabelsBackgroundColor
Alignmentstring

'center'

setDataLabelsAligngetDataLabelsAlign
Dataobject
{formatType:'0',dataDecimals:2}
setDataLabelsDateFormatgetDataLabelsDateFormat
Font sizenumber12setDataLabelsFontSizegetDataLabelsFontSize
Paddingnumber0setDataLabelsPaddinggetDataLabelsPadding
  • Remark
PropertyTypeDefaultSet ValueGet Value
DisplaybooleanfalsesetCreditsEnabledgetCreditsEnabled
RemarkstringundefinedsetCreditsTextgetCreditsText

General Script

info

The following examples do not include all supported configuration items. You can go to https://api.highcharts.com.cn/highcharts/index.html to check all items.

  • updateConfigNew
/**\n * @desc: General packed functions to change
charts property
* @param {String} property:
Property level
* @param {String} serviceName:
Property value
*/

var chart = scriptUtil.getRegisterReactDom('componentId');

chart.updateConfigNew('chart->options3d->enabled',
true);
  • deleteAllSeries
/**
* @desc: Packed function to clear all series on
current chart
*/

var chart = scriptUtil.getRegisterReactDom('componentId');

chart.deleteAllSeries();
  • getCurrentInstance

/**
* @desc Packed function to get highchart instance,
used to call embedded highchart function
* @return {Object}: Highchart object
*/

var chart = scriptUtil.getRegisterReactDom('componentId');

var hchart = chart.getCurrentInstance();

// add a data entry

hchart.addSeries({
name: 'name',
data: [
{ y: 123, name: 'Emma' },
{ y: 123, name: 'Jason' },
]
})

Chart Scripts

Line Chart

TypePropertyDescriptionTypeDefaultSet ValueGet ValueScript Use
BaseToggle typeChange the chart line typebooleanfalsesetCutTypegetCutTypeYes
Timed refreshnumber0setTimergetTimer
Chart styleBackend nameDisplay name of the data source (trailingShowName)booleanfalsesetGetSourceNamegetGetSourceName
StyleLine styleobject
{lineWidth: 2, dashStyle: 'solid', symbol:'circle',
radius:4, fillColor:'#fff'}
setChartDataLinegetChartDataLineYes
Warningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
Gridnumber0setShowGridgetShowGridYes
X axisX axis typestring

'category'

setXAxisTypegetXAxisType
Formatstring

'{value}'

setDateFormatgetDateFormat
Show X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow multiple Y axisstring

'one'

setIsMoreYAxisgetIsMoreYAxis
Show Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setYAxisTitleAligngetYAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax
  • Simulate data
// trailingShowName: Backend name > data source name
during designing > none on priority

var ArrayList = Java.type("java.util.ArrayList");

var arr = [

{total:22,woman:41,month:"Jan",man:55, trailingShowName:
"Backend name"},

{total:44,woman:21,month:"Feb",man:55},

{total:109,woman:64,month:"Mar",man:55},

{total:108,woman:43,month:"Apr",man:65},

{total:117,woman:34,month:"May",man:83},

{total:111,woman:76,month:"Jun",man:34},

{total:111,woman:72,month:"Jul",man:38},

{total:111,woman:72,month:"Aug",man:84},

{total:98,woman:72,month:"Sep",man:26},

{total:98,woman:72,month:"Oct",man:45},

{total:98,woman:16,month:"Nov",man:73},

{total:98,woman:76,month:"Dec",man:15}

];

var list = new ArrayList(arr);
var result = { list:list }

result;
  • Example code
// get the element with an Id as LineChart-1

var LineChart1 =
scriptUtil.getRegisterReactDom('LineChart-1');

// line style
LineChart1.setChartDataLine({lineWidth: 5, dashStyle:
'solid', symbol:'circle', radius:10, fillColor:'red'});

// warning
LineChart1.setChartEarly({ min: 20, max: 50,
color:'red', enabled:false });

Spline Chart

TypePropertyDescriptionTypeDefaultSet ValueGet ValueScript Use
BaseToggle typeChange the chart line typebooleanfalsesetCutTypegetCutType
Timed refreshnumber0setTimergetTimer
Chart styleStyleLine styleobject
{lineWidth: 2, dashStyle: 'solid', symbol:'circle',
radius:4, fillColor:'#fff'}
setChartDataLinegetChartDataLineYes
Warningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
Gridnumber0setShowGridgetShowGridYes
Coordinate inversionnumber0setAxisReversalgetAxisReversalYes
X axisX axis typestring

'category'

setXAxisTypegetXAxisType
Formatstring

{value}

setDateFormatgetDateFormat
Show X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setYAxisTitleAligngetYAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax
  • Simulate data
// trailingShowName: Backend name > data source name
during designing > none on priority

var ArrayList = Java.type("java.util.ArrayList");

vararr = [

{total:22,woman:41,month:"Jan",man:55, trailingShowName:
"Backend name"},

{total:44,woman:21,month:"Feb",man:55},

{total:109,woman:64,month:"Mar",man:55},

{total:108,woman:43,month:"Apr",man:65},

{total:117,woman:34,month:"May",man:83},

{total:111,woman:76,month:"Jun",man:34},

{total:111,woman:72,month:"Jul",man:38},

{total:111,woman:72,month:"Aug",man:84},

{total:98,woman:72,month:"Sep",man:26},

{total:98,woman:72,month:"Oct",man:45},

{total:98,woman:16,month:"Nov",man:73},

{total:98,woman:76,month:"Dec",man:15}


];

var list = new ArrayList(arr);
var result = { list:list }

result;
  • Example code
// get the element with an Id as LineChart-1

var LineChart1 =
scriptUtil.getRegisterReactDom('LineChart-1');



// line style

LineChart1.setChartDataLine({lineWidth: 5, dashStyle:
'solid', symbol:'circle', radius:10, fillColor:'red'});


// warning

LineChart1.setChartEarly({ min: 20, max: 50,
color:'red', enabled:false });

Bar Chart

TypePropertyTypeDefaultSet ValueGet ValueScript Use
BaseToggle typebooleanfalsesetCutTypegetCutType
Timed refreshnumber0setTimergetTimer
Chart styleStackstringnullsetStackinggetStacking
Warningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
Column widthnumber20setPointWidthgetPointWidthYes
Rounded cornernumber0setSeriesBorderRadiusgetSeriesBorderRadiusYes
Gridnumber0setShowGridgetShowGridYes
Coordinate inversionnumber0setAxisReversalgetAxisReversal
X axisShow X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax

Area Chart

TypePropertyDescriptionTypeDefaultSet ValueGet ValueScript Use
BaseToggle typebooleanfalsesetCutTypegetCutType
Chart styleStyleLine styleobject
{lineWidth: 2, dashStyle: 'solid', symbol:'circle',
radius:4, fillColor:'#fff'}
setChartDataLinegetChartDataLineYes
Warningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
Gridnumber0setShowGridgetShowGridYes
Coordinate inversionnumber0setAxisReversalgetAxisReversal
Stackstring
{ stacking:null, type:'area' }
setStackinggetStacking
Mark MaxbooleanfalsesetPointWidthgetPointWidth
BorderLabel borderobjectfalse
Font colorLabel font colorstring
{borderWidth:1, borderRadius:5,
borderColor:'#48D1CC'}
Background colorLabel background colorstring

#000

X axisX axis typestring

'category'

setXAxisTypegetXAxisType
Formatstring

{value}

setDateFormatgetDateFormat
Show X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax

Dash Chart

PropertyTypeDefaultSet ValueGet ValueScript Use
Dial colorstring

'#fff'

setPanelBackgroundColorgetPanelBackgroundColor
Border styleobject
{borderColor: '#ddd', borderWidth: 1}
setPanelBorderColorWidthgetPanelBorderColorWidth
Scale interval/Max/Start/end angleobject
{tickAmount:4, max:200, startAngle:-90, endAngle:90}
setDialCofgetDialCof
Scale colorstring

'#333'

setTickColorgetTickColorYes
Font colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Borenumber60setPaneWidthgetPaneWidthYes

Speedometer

PropertyTypeDefaultSet ValueGet ValueScript Use
Timed refreshnumberundefinedsetTimergetTimer
Dial colorstring

'#fff'

setPanelBackgroundColorgetPanelBackgroundColor
Border styleobject
{borderColor: '#ddd', borderWidth: 1}
setPanelBorderColorWidthgetPanelBorderColorWidth
Scale interval/Max/Start/end angleobject
{tickAmount:4, max:200, startAngle:-90, endAngle:90}
setDialCofgetDialCof
Scale colorstring

'#333'

setTickColorgetTickColorYes
Scale lengthnumber10setTickExtentgetTickExtentYes
Font colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Horizontal/lateral offsetobject
{xAxisDeviation:50, yAxisDeviation:50}
setPanelCenterPostiongetPanelCenterPostionYes
Mark areaobject[]setPlotBandsgetPlotBands
Origin color/radiusobject
{backgroundColor:'#000', radius:5}
setPivotColorRadiusgetPivotColorRadiusYes
Border color/radiusobject
{ borderColor:'#000000', borderWidth:2 }
setGaugeBorderColorWidthgetGaugeBorderColorWidthYes
Tail lengthnumberundefinedsetRearLengthgetRearLengthYes
Bore diameternumber60setPaneWidthgetPaneWidthYes
Display namebooleantruesetGaugeLabelsEnabledgetGaugeLabelsEnabledYes
Link scalebooleantruesetBackgroundShapegetBackgroundShapeYes

Bubble Chart

TypePropertyTypeDefaultSet ValueGet ValueScript Use
Chart styleBubble sizenumber100setBubbleSizegetBubbleSizeYes
Warningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
Gridnumber0setShowGridgetShowGridYes
X axisShow X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow multiple Y axisstring

'one'

setIsMoreYAxisgetIsMoreYAxis
Show Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setYAxisTitleAligngetYAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax

Scatter Chart

TypePropertyTypeDefaultSet ValueGet ValueScript Use
Chart styleStylenumber100setPointSizeLinkgetPointSizeLink
Warningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
Gridnumber0setShowGridgetShowGridYes
Regression linebooleanbooleansetRegressionLinegetRegressionLine
X axisShow X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow multiple Y axisstring

'one'

setIsMoreYAxisgetIsMoreYAxis
Show Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setYAxisTitleAligngetYAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax

Pie Chart

PropertyTypeDefaultSet ValueGet ValueScript Use
Timed refreshnumberundefinedsetTimergetTimer
Typestring

'pie'

setTypegetTypeYes
Styleobject
{ borderWidth:1, innerSize:'0%', slicedOffset:10 }
setPiePeculiaritygetPiePeculiarity
Colorstring

'1'

setColourMatchgetColourMatchYes
Legend-Markstring

'circular'

setMarkSelectgetMarkSelectYes
Label-Label positionnumber30setDistancegetDistanceYes

Funnel Chart

PropertyTypeDefaultSet ValueGet ValueScript Use
Timed refreshnumberundefinedsetTimergetTimer
Typestring

'funnel'

setTypegetTypeYes
Styleobject
{ neckWidth:'30%, neckHeight:'30% }
setFunnelNeckSetgetFunnelNeckSetYes
Border colorobject
{borderColor: '#fff', borderWidth: 2}
setFunnelBorderColorWidthgetFunnelBorderColorWidthYes

Spider Chart

PropertyTypeDefaultSet ValueGet ValueScript Use
Styleobject
{lineWidth: 2, dashStyle: 'solid', symbol:'circle',
radius:4, fillColor:'#fff'}
setChartDataLinegetChartDataLineYes
OpacitynumbersetRegionTransparencygetRegionTransparencyYes
Mesh colorstring

'#ddd'

setGridLineColorgetGridLineColorYes

Donut Chart

PropertyTypeDefaultSet ValueGet ValueScript Use
Timed refreshnumberundefinedsetTimergetTimer
Typestring

'pie'

setTypegetTypeYes
Styleobject
{ borderWidth:1, innerSize:'0%', slicedOffset:10 }
setPiePeculiaritygetPiePeculiarity
Label-Label positionnumber30setDistancegetDistanceYes

Spc Diagram

TypePropertyTypeDefaultSet ValueGet ValueScript Use
Chart styleLine widthnumber1setSeriesLineWidthgetSeriesLineWidthYes
Line stylestring

'Solid'

setSeriesDashStylegetSeriesDashStyleYes
Mark sizenumber4setMarkerSymbolSizegetMarkerSymbolSizeYes
Mark symbolstring

'circle'

setSeriesMarkerSymbolgetSeriesMarkerSymbolYes
Typeobject
{ key, config, type, objKey, value }
setSpcTypegetSpcType
Gridnumber0setShowGridgetShowGridYes
X axisX axis typestring

'category'

setXAxisTypegetXAxisType
Formatstring

'{value}'

setDateFormatgetDateFormat
Show X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setYAxisTitleAligngetYAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax

Histogram

TypePropertyTypeDefaultSet ValueGet ValueScript Use
Chart styleWarningobject
{ min: undefined, max: undefined, color:'red',
enabled:false
}
setChartEarlygetChartEarlyYes
GridstringnullsetCuLinegetCuLineYes
Fitted linenumber4setMarkerSymbolSizegetMarkerSymbolSizeYes
X axisX axis typestring

'category'

setXAxisTypegetXAxisType
Formatstring

'{value}'

setDateFormatgetDateFormat
Show X axisbooleantruesetXAxisVisiblegetXAxisVisibleYes
Cross hairbooleanfalsesetXAxisCrosshairgetXAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setXAxisScalegetXAxisScale
TitlestringundefinedsetXAxisTitlegetXAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setXAxisTitleStylegetXAxisTitleStyleYes
Title positionstring

'middle'

setXAxisTitleAligngetXAxisTitleAlignYes
Axis line colorstring

'#ccd6eb'

setxAxisColorgetxAxisColorYes
Axis text colorstring

'#666'

setXAxisLablesStylegetXAxisLablesStyleYes
Rotation anglenumber0setXAxisRotationgetXAxisRotationYes
Vertical textbooleanfalsesetXAxisWritingModegetXAxisWritingModeYes
Y axisShow Y axisbooleantruesetYAxisVisiblegetYAxisVisibleYes
UnitstringundefinedsetYAxisFormatgetYAxisFormatYes
GridbooleantruesetYGridgetYGridYes
Cross hairbooleanfalsesetYAxisCrosshairgetYAxisCrosshairYes
Scaleobject
{ min: null, tickInterval: undefined }
setYAxisScalegetYAxisScale
TitlestringundefinedsetYAxisTitlegetYAxisTitleYes
Text styleobject
{fontSize:12, fontFamily:'Arial', color:'#000',
fontWeight:'normal', fontStyle:'initial'}
setYAxisTitleStylegetYAxisTitleStyleYes
Title positionstring

'middle'

setYAxisTitleAligngetYAxisTitleAlignYes
Axis text colorstring

'#666'

setYAxisLablesStylegetYAxisLablesStyleYes
Rotation anglenumber0setYAxisRotationgetYAxisRotationYes
Maximum valuenumberundefinedsetYAxisMaxgetYAxisMax

Controls Library

History Alarm

PropertyTypeDefaultSet ValueGet Value
Component backgroundstring

'#f7f8fa'

setConpontBackgroundgetConpontBackground
List backgroundstring

'#222734'

setListBackgroundgetListBackground
Title backgroundstring

'#b4bdd1'

setTitleBackgroundgetTitleBackground
Title colorstring

'#ffffff'

setTitleColorgetTitleColor

Drive Video

  • Property Description
PropertyTypeDefaultSet ValueGet Value
Auto playBooleantruesetAutoPlay(Boolean)getAutoPlay()
Video carouselBooleanfalsesetCarousel(Boolean)getCarousel()
Real-time videoObjectsetStreamSource(Object)getStreamSource()
Video playbackObjectsetHistorySource(Object)getHistorySource()
  • Example Code
info

No scripts supported in operation center.


// set data for video carousel

scriptUtil.getRegisterReactDom("componentId").setStreamSource({


carousel: false, // whether to run video carousel

maxchannel: null, // maximum number of channels

chooseChannel: undefined, // select a channel

cameramodel: null, // video mode

manufacturer: null, // manufacturer

videoSource: "", // video source data

});
// set data for real-time playback

scriptUtil.getRegisterReactDom("componentId").setHistorySource({


videoSource: "", // video source data

});

video Wall

  • Property Description
PropertyTypeDefaultSet ValueGet Value
LayoutObject
{row: 1,col:1}
setLayout(Object)getLayout()
Display titleBooleantruesetTitleVisibility(Boolean)getTitleVisibility()
TitlestringsetTitle(string)getTitle()
Text styleObjectsetChartTitle(Object)getChartTitle()
Alignmentstring

'center'

setTitleAlign(string)getTitleAlign()
Background colorstring

'#e3e3e3'

setBgColor(string)getBgColor()
Auto playBooleantruesetAutoPlay(Boolean)getAutoPlay()
Video carouselBooleanfalsesetCarousel(Boolean)getCarousel()
Real-time videoObjectsetStreamSource(Object)getStreamSource()
Video playbackObjectsetHistorySource(Object)getHistorySource()
  • Example Code
// set title style

scriptUtil.getRegisterReactDom("component id").setChartTitle(
{


fontSize: 12, // font size

fontFamily: "Arial", // font

color: "#333333", // font color

fontWeight: "", // font weight

fontStyle: "", // font style

});

Timer

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component IDAutomatically generated.string
Component NameID for setting value.stringsetFormItemId(value)getFormItemId()
Time IntervalInterval for executing the timer.number1setSecond(value)getSecond()
Immediate RunRun the script after elements load completely.booleanfalsesetStartNow(value)getStartNow()
Run TimesSet the times of running the script. If Immediate Run is enabled, it takes up one run time.numberno limitsetTimesRun(value)getTimesRun()
ScriptExecution script of the timer.scriptsetIntervalScript(value)getIntervalScript()
  • Example Code
    • Script data format
      {
      type, //script type (reload/custom)
      script //script content
      }
    • Clear timer
      var Interval = scriptUtil.getRegisterReactDom('componentId');
      Interval.clearTimer();
    • Start timer
      var Interval = scriptUtil.getRegisterReactDom('componentId');
      Interval.startTimer();

Trend

  • Property Description
PropertyTypeDefaultSet ValueGet Value
Data sourcearray[]setDataSourcegetDataSource
RangebooleantruesetDataSourcegetDataSource
Display Y axisstring

'1'

setDataSourcegetDataSource
Time periodnumber28800000setDataSourcegetDataSource
Display toolbarbooleanTRUEsetToolBarShowgetToolBarShow
List typestring

'1'

setShowListTypegetShowListType
Background colorstring

'#FFFFFF'

setDivBackgroundColorgetDivBackgroundColor
Chart colorstringrgba(159,194,255,0.12)setChartBackgroundColorgetChartBackgroundColor
Border colorstring

'#cccccc'

setBorderColorgetBorderColor
Slider colorstring

'#666666'

setCrosshairColorgetCrosshairColor
Font colorstring

'#666666'

setTextColorgetTextColor
  • Example Code
// mock data source
var obj = [
{
color:"#009DD7",name:"system:Template_2:aa_5:system:Property_20",
primitiveType:"DOUBLE"},
{
color:"#39435A",name:"system:Template_2:aa_5:system:Property_19",
primitiveType:"FLOAT"}
]

// get the element with an ID as TrendChart-1
var TrendChart1 =
scriptUtil.getRegisterReactDom('TrendChart-1');

// display too;bar
TrendChart1.setToolBarShow(true);

// select list type
TrendChart1.setShowListType("2");

// background color
TrendChart1.setDivBackgroundColor('red');

// chart color
TrendChart1.setChartBackgroundColor('red');

// border color
TrendChart1.setBorderColor('red');

// clider color
TrendChart1.setCrosshairColor('red');

// font color
TrendChart1.setTextColor('red');

// add data source (less than 8 entries are allowed to insert and excessed data is invalid)

// single data source{} multple data source[] name&primitiveType&color are required
TrendChart1.setObjectData(obj)

// set starting time
TrendChart1.setRegularTime(start,end);

// change time and data source (up to 8 entries) at the same time
TrendChart1.changeTimeAndSource(start, end, type, dataSourceObj);

/* ************following examples are for
changeTimeAndSource************ */

// no data source repalcement, no time->call setRegularTime->prompts no start/end time and no subsequent operation
TrendChart1.changeTimeAndSource();

// no data source repalcement, start time->call setRegularTime->prompts no start/end time and no subsequentoperation
TrendChart1.changeTimeAndSource('2019-10-16 08:30:00')

// no data source repalcement, end time->call setRegularTime->prompts no start/end time and no subsequent operation
TrendChart1.changeTimeAndSource(undefined,'2019-10-16 08:30:00')

// no data source repalcement, start time->call setRegularTime->replace time period of current trend chart
TrendChart1.changeTimeAndSource('2019-10-16 08:30:00','2019-10-16 08:30:30')

// data source repalcement (object)->replace time period of current trend chart and data source
var obj = { color:"#009DD7",name:"mock_demo:mock1", primitiveType:"Float"}
TrendChart1.changeTimeAndSource('2019-10-16 08:30:00','2019-10-16 08:30:30','all',obj)

// data source repalcement (array)->replace time period of current trend chart and data source
TrendChart1.changeTimeAndSource('2019-10-16 08:30:00','2019-10-16 08:30:30','all',obj)

// data source repalcement (array), no time->prompts no start/end time and no subsequent operation
TrendChart1.changeTimeAndSource('dfd','2019-10-16 08:30:30','all', obj)

To Do List

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
DataWorkflow datasetTabs(value)getTabs()
Articles per PageSet the number items displayed on each page.number10setPageSize(value)getPageSize()
BorderSet whether border exists and its width, color and type.string 'true' 'falsetruesetBorder(value)getBorder()
Border Sizenumber1setBorderWidth(value)getBorderWidth()
Border TypestringsolidsetBorderStyle(value)getBorderStyle()
Border Colorstring#e8e8e8setBorderColor(value)getBorderColor()
Column widthWhether to enable column width to adjust based on contentbooleantruesetAutoWidth(value)getAutoWidth()
Head BackgroundSet the background color of the table head.string#6c748dsetTheadBackgroundColor(value)getTheadBackgroundColor()
Font ColorSet the font color. size and type of the table head.string#fffsetTheadFontColor(value)getTheadFontColor()
Font Sizenumber14setTheadFontSize(value)getTheadFontSize()
FontstringArialsetTheadFontFamily(value)getTheadFontFamily()
Table BackgroundSet the background color of the table body.string#fffsetTbodyBackgroundColor(value)getTbodyBackgroundColor()
Font ColorSet the font color. size and type of the table body.string#000setTbodyFontColor(value)getTbodyFontColor()
Font Sizenumber14setTbodyFontSize(value)getTbodyFontSize()
FontstringArialsetTbodyFontFamily(value)getTbodyFontFamily()
Odd Line ColorBackground color of odd lines on the list.string#fffsetSingleRowColor(value)getSingleRowColor
Even Line ColorBackground color of even lines on the list.string#fffsetDoubleRowColor(value)setDoubleRowColor()
  • Example Code
[ //data format
{
value: 'todo', //todo/done/request/attention/delegate/
label: 'to-do',
isShow: true, // whether to display it
children: [ // table content
{
label: 'index',
value: 'index',
isShow: true, // whether to display the item
showModal: false, // click to display pop-up
url: '', // propmt url
modalWidth: 1200, // prompt width
modalHeight: 800, // prompt height
style: {
color: '#000', // item style
fontSize: 14,
fontFamily: 'Arial'
}
},

...

]
},

...
]

Report

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID of linked componentstringsetFormItemIdgetFormItemId
Fill TypeData source fill type (insert/replace)stringinsertsetFillDataTypegetFillDataType
Scroll BarWhether ti display scrollbar (auto/visible/hidden)stringautosetScrollbarVisiblegetScrollbarVisible
Fix on TopbooleanfalsesetPosition('topEnable', value)getPosition
Fix on RightbooleanfalsesetPosition('rightEnable', value)getPosition
Fix on BottombooleanfalsesetPosition('bottomEnable', value)getPosition
Fix on LeftbooleanfalsesetPosition('leftEnable', value)getPosition
Run EditWhether to enable edit in operation centerbooleanfalsesetRunTimeEditgetRunTimeEdit
Zoom (Small)Zoom out to fit small screen in flow layoutbooleantruesetRunTimeZoomSheetgetRunTimeZoomSheet
Zoom (Large)Zoom in to fill the report in flow layoutbooleantruesetRunTimeZoomLargeSheetgetRunTimeZoomLargeSheet
Sheet PageWhether to display sheet page in operation centerbooleantruesetRunTimeShowSheetgetRunTimeShowSheet
Initial LoadWhether to request for data when initializationbooleantruesetInitLoadDatagetInitLoadData
Background ColorReport background colorstring#F5F5F5setBackgroundColorgetBackgroundColor
  • Example Code
// get element with an Id as htDiv-k8tj6ada0-704
var reporterCtrl =
scriptUtil.getRegisterReactDom('htDiv-k8tj6ada0-704');

// component name
reporterCtrl.setFormItemId('ReporterCtrl');
const reporterName = reporterCtrl.getFormItemId();

// fill type
reporterCtrl.setFillDataType('replace');
const fillDataType = reporterCtrl.getFillDataType();

//scroll bar
reporterCtrl.setScrollbarVisible('auto');
const scrollbarVisible =
reporterCtrl.getScrollbarVisible();

// fix on top
reporterCtrl.setPosition('topEnable', true);
const topEnable =
reporterCtrl.getPosition()['topEnable'];

// fix on bottom
reporterCtrl.setPosition('bottomEnable', true);
const bottomEnable =
reporterCtrl.getPosition()['bottomEnable'];

// fix on left
reporterCtrl.setPosition('leftEnable', true);
const leftEnable =
reporterCtrl.getPosition()['leftEnable'];

// fix on right
reporterCtrl.setPosition('rightEnable', true);
const rightEnable =
reporterCtrl.getPosition()['rightEnable'];

//run edit
reporterCtrl.setRunTimeEdit(true);
const runTimeEdit = reporterCtrl.getRunTimeEdit();

//zoom out
reporterCtrl.setRunTimeZoomSheet(true);
const runTimeZoomSheet =
reporterCtrl.getRunTimeZoomSheet();

//zoom in
reporterCtrl.setRunTimeZoomLargeSheet(true);
const runTimeZoomLargeSheet =
reporterCtrl.getRunTimeZoomLargeSheet();

//Sheet page
reporterCtrl.setRunTimeShowSheet(true);
const runTimeShowSheet =
reporterCtrl.getRunTimeShowSheet();

//initial load
reporterCtrl.setInitLoadData(true);
const initLoadData = reporterCtrl.getInitLoadData();


//background color
reporterCtrl.setBackgroundColor('#f5f5f5');
const backgroundColor = reporterCtrl.getBackgroundColor();

Web Page

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component nameID for setting value.stringsetFormItemIdgetFormItemId
Title contentstringtitlesetLabelContent(value)getLabelContent()
Title font
{fontFamily: "Arial", fontSize: 14, fontWeight:
"normal", fontStyle: "normal", textAlign: "left"}
setTitleFont(value)getTitleFont()
Title colorstring

#000

setTitleColor(value)getTitleColor()
Title margin
{left: 0, top: 0, right: 0, bottom: 0}
setTitleMargin(value)getTitleMargin()
UrlstringsetUrl(value)getUrl()
De-IframeWhether to disable I-framebooleanfalsesetIsNoIframeMode(value)getIsNoIframeMode()
Margin
{left: 0, top: 0, right: 0, bottom: 0}
setIframeMargin(value)getIframeMargin()
Padding
{left: 0, top: 0, right: 0, bottom: 0}
setIframePadding(value)getIframePadding()
Backgroundstring

#f5f4f4

setBackColor(value)getBackColor()
Border
{color: "#dedede", width: 1, borderStyle: "solid"}
setIframeBorder(value)getIframeBorder()
Data sourceSet data source for reminders through property or servicesetObject(object)
info

We recommend not to change data source through script

getObject()
  • Example Code
var instance =
scriptUtil.getRegisterReactDom("htDiv-kki3is7u0-1409");
instance.setUrl("https://cn.bing.com/");

Calendar

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
PositionElement position

setPosition({x:100,y:100})

getPosition()
SizeElement size

setSize({width:100,height:100})

getSize()
Data sourceReminder data through property/servicesetDataSource(object)
info

We recommend not to change data source through script

setDataSource()
Default valueKey of default value (cannot modify)string

init

setInitValue(value)getInitValue()
Default nameTitle of default reminderstringdefaultsetInitName(value)getInitName()
Default colorFont color of default reminder

#979797

setInitColor(value)getInitColor()
Normal valueKey of normal value (cannot modify)string

success

setSuccessValue(value)getSuccessValue()
Normal nameTitle of normal reminderstringnormalsetSuccessName(value)getSuccessName()
Normal colorFont color of normal reminder

#4a68ea

setSuccessColor(value)getSuccessColor()
Overdue valueKey of overdue value (cannot modify)string

error

setErrorValue(value)getErrorValue()
Overdue nameTitle of overdue reminderstringoverduesetErrorName(value)getErrorName()
Overdue colorFont color of overdue reminderstring

#ee1111

setErrorColor(value)getErrorColor()
Context fontFont of element contextsetContextFontFamily(value)getContextFontFamily()
Head font sizeFont size of head datenumber13setHeaderDateFontSize(value)getHeaderDateFontSize()
Head font colorFont color of head datestring

#000

setHeaderDateColor(value)getHeaderDateColor()
Button sizeHead button sizenumber13setButtonFontSize(value)getButtonFontSize()
Button colorHead button colorstring

#000

setButtonColor(value)setButtonColor()
Button backgroundHead button backgroundstring

#fff

setButtonBackgroundColor(value)getButtonBackgroundColor()
Button selected colorSelected head button sizestring

#fff

setButtonSelectedColor(value)getButtonSelectedColor()
Button selected backgroundSelected head button backgroundstring

#4a68ea

setButtonSelectedBackgroundColor(value)getButtonSelectedBackgroundColor()
Title sizeTitle font sizenumber14setTitleFontSize(value)getTitleFontSize()
Title colorTitle font colorstring

#000

setTitleColor(value)getTitleColor()
Title fontTitle font typestringsetTitleFontFamily(value)getTitleFontFamily()
Title backgroundTitle backgroundstring

#eff3f6

setTitleBackgroundColor(value)getTitleBackgroundColor()
Content sizeContent font sizenumber14setContextFontSize(value)getContextFontSize()
Content colorContent font colorstring

#000000a6

setContextColor(value)getContextColor()
Content backgroundContent font backgroundstring

#fff

setContextBackgroundColor(value)getContextBackgroundColor()
Selected sizeSelected content font sizenumber14setSelectedFontSize(value)getSelectedFontSize()
Selected colorSelected content font colorstring

#000000a6

setSelectedColor(value)getSelectedColor()
Selected backgroundSelected content backgroundstring

#fff9ea

setSelectedBackgroundColor(value)getSelectedBackgroundColor()
Current day colorFont color of current day contentstring

#fff

setTodayColor(value)getTodayColor()
Current day backgroundBackground of current day contentstring

#f00

setTodayBackgroundColor(value)getTodayBackgroundColor()
interactExecute selected event by scriptstringOutput date Format: Weekly/Monthly:2020-03-27Yearly:2020-3
  • Example Code
{
list:[
{
date:'2019-11-11',
children:[
{
type:'init',
content:'to-do list'
url:'http://www.xxx.com' // URL
(optional)
},
{
type:'success',
content:'to-do list'
url:'http://www.xxx.com' // URL
(optional)
},
{
type:'error',
content:'to-do list'
url:'http://www.xxx.com' // URL
(optional)
}
]
},
{
date:'2019-11-12',
children:[
{
type:'init',
content:'to-do list'
url:'http://www.xxx.com' // URL
(optional)
},
{
type:'success',
content:'to-do list'
url:'http://www.xxx.com' // URL
(optional)
},
{
type:'error',
content:'to-do list'
url:'http://www.xxx.com' // URL
(optional)
}
]
}
]
}

Programmable Component

Design custom elements by writing scripts.

For details of building development environment for programmable component, see Programmable Component.

Form Library

Line

PropertyTypeDefaultSet ValueGet Value
Line Direction

'top' / 'right' / 'bottom' / 'left'

'top'

setDirectiongetDirection
Line Type

'solid' / 'dotted' / 'dashed' / 'double'

'solid'

setLineStylegetLineStyle
Line Sizenumber1setSizegetSize
Line Colorstring30setLineColorgetLineColor

Label

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Content SourceWhether the source is dynamic or static

'hand' / 'select'

'hand'

setValueConfig()getValueConfig().source
Label ContentSet static data

'input' / 'textarea'

'input'

setValueConfig()getValueConfig().valueType
Font SizeFont style of the contentnumber16setFontSize()
Font Colorstring#000000setFontColor()getFontColor()
Font Unittring: 'px' / 'em'

'px'

setFontSizeUnit()getFontSizeUnit()
FontstringArialsetFontFamily()getFontFamily()
Bold

'normal' / 'bold'

normalsetFontWeight()getFontWeight()
Alignment

'left' / 'center' / 'right'

leftsetTextAlign()getTextAlign()
Vertical Alignment

'top' / 'middle' / 'bottom'

topsetVerticalAlign()getVerticalAlign()
Border WidthBorder style of the search boxnumber0setBorderWidth()getBorderWidth()
Border Colorstring#000000setBorderColor()getBorderColor()
Border Type

'solid' / 'dotted'/ 'dashed'

solidsetBorderStyle()getBorderStyle()
Background Colorstring#ffffffsetBackgroundColor()getBackgroundColor()
Cursor StyleCursor style when hovering

'auto' / 'crosshair' / 'pointer' / 'move' / 'text' / 'help'

autosetCursor()getCursor()
RequiredWhether there is a required mark

'no' / 'yes'

nosetIsRequired()getIsRequired()
Top Paddingobject
{ spacingTop: 0 }
setBaseBoxSpacing()getBaseBoxSpacing().spacingTop
Bottom Paddingobject
{ spacingBottom: 0 }
setBaseBoxSpacing()getBaseBoxSpacing().spacingBottom
Left Paddingobject
{ spacingLeft: 0 }
setBaseBoxSpacing()getBaseBoxSpacing().spacingLeft
Right Paddingobject
{ spacingRight: 0 }
setBaseBoxSpacing()getBaseBoxSpacing().spacingRight
  • Example Code
    • Set value
      var labelCtrl = scriptUtil.getRegisterReactDom('component Id');

      // set the label content to labelValue
      labelCtrl.setLabelContent('labelValue');
    • Get value
      var labelCtrl = scriptUtil.getRegisterReactDom('component Id');

      // get the label content
      var value = getLabelContent();

Hidden Field

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
DefaultSet the default valuestringsetDefaultValue()getDefaultValue()
  • Example Code
    • Set value
      var HiddenField =
      scriptUtil.getRegisterReactDom('component Id');

      // set to string: 1
      HiddenField.setValue("1");

      // set to boolean type: true/false
      HiddenField.setValue(true);

      // set to obkect {}
      HiddenField.setValue({name: 1});

      // set values in batches through component name
      scriptUtil.setFormData({ component name 1: 'labelValue', component name 2: 'labelValue2' })
    • Get value
      var HiddenField = scriptUtil.getRegisterReactDom('componentId');
      var value = HiddenField.getValue();
      // get values in batches through component name
      var data =
      scriptUtil.getFormData(['component name 1','component name2']);

Input Box

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NamestringsetFormItemIdgetFormItemId
PlaceholderPlaceholder in input boxstring

''

setPlaceHoldergetPlaceHolder()
Content SizeFont style of the input box contentnumber14setContextFontSizegetContextFontSize
Content Colorstring#000000setContextColorgetContextColor()
Content Fontstring

''

setContextFontFamilygetContextFontFamily()
Verification TimeWhether to verify the input box or when in operation centerObjectsetValidityCheckgetValidityCheck()
RequiredWhether the input box content is required

'true' / 'false'

'false'

setValidityCheckgetValidityCheck().isRequired
FormatContent format, such as 'none' / 'mobilePhone' / 'telephone' /'zipCode' / 'idCard' / 'number' / 'email' / 'ip' / 'custom'string

'none'

setValidityCheckgetValidityCheck().customReg
Multi-lineWhether to enable multiple lines

'no' / 'yes

'no

setIsMultipleLinegetIsMultipleLine()
Border WidthInput box stylenumber1setBorderWidthgetBorderWidth()
Border Colorstring#fffsetBorderColorgetBorderColor()
Border Type

'solid' / 'dotted' / 'dashed'

'solid'

setBorderStylegetBorderStyle()
Background Colorstring#fffsetBackgroundColor()getBackgroundColor()
Max. LengthInput box content lengthnumber500setMaxLengthgetMaxLength()
  • Example Code
    • Set value
      var Input = scriptUtil.getRegisterReactDom('componentId');

      Input.setValue('XXXX');

      // set data in batches to change form data at once

      scriptUtil.setFormData({ component name 1: 'xxx', component name 2: 'xxx' })
    • Get value
      var HiddenField =
      scriptUtil.getRegisterReactDom('component Id');

      Input.getValue();
      // get values in batches through component name
      var data =
      scriptUtil.getFormData(['component name 1','component name2']);
  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NamestringsetFormItemIdgetFormItemId
PlaceholderPlaceholder in drop-down boxstring

''

setPlaceHoldergetPlaceHolder()
Content SizeFont style of the drop-down box contentnumber14setContextFontSizegetContextFontSize
Content Colorstring#000000setContextColorgetContextColor()
Content Fontstring

''

setContextFontFamilygetContextFontFamily()
Background Colorstring#fffsetBackgroundColor()getBackgroundColor()
Border WidthDrop-down box border stylenumber1setBorderWidthgetBorderWidth()
Border Colorstring#E3E3E3setBorderColorgetBorderColor()
Border Type

'solid' / 'dotted' / 'dashed'

'solid'

setBorderStylegetBorderStyle()
Verification TimeWhether to verify the drop-down box or when in operation centerObjectsetValidityCheckgetValidityCheck()
RequiredWhether the drop-down box content is required

'true' / 'false

'false'

setValidityCheckgetValidityCheck().isRequired
OptionsDrop-down list optionsobjectdynamicsetdataSourcegetdataSource().type
Dynamic DataOptions from binding with object modelsobject-setdataSourcegetdataSource().dynamicDataSource
Static DataManually add optionsobject-setdataSourcegetdataSource().staticDataSource
SortSort options

'ordinary' / 'up' / 'down

'ordinary'

setListOrdergetListOrder()
Multi SelectionWhether to enable multiple selectionsbooleantrue / falsesetIsMultiple()getIsMultiple()
  • Example Code
    • Get selected options
      var SelectCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      SelectCtrl.getChooseOption();
    • Get selected option value
      var SelectCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      SelectCtrl.getValue();
    • Set selected option value
      var SelectCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      SelectCtrl.setValue('1');
    • Import options
      var data = [
      {
      optionText: 'M',
      optionValue: '1'
      },
      {
      optionText: 'F',
      optionValue: '2'
      }
      ];

      var SelectCtrl = scriptUtil.getRegisterReactDom('component Id');
      SelectCtrl.setObjectData(data);
      info

      Only works when set data source to static under property.

    • Set whether to enable multiple selections
      var SelectCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      SelectCtrl.setIsMultiple(true);
    • Get form data
      // Get component value in batches after submitting forms
      // formItemId is component name [component name 1, component name 2]

      scriptUtil.getFormData([formItemId]);
    • Set form data
      // Set data in batches to change form data at once
      // formItemId is component name,value is component value

      scriptUtil.setFormData({
      'formItemId':value
      });

Cascade Selection

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
TitleText before the input boxstringtitlesetLabelContentgetLabelContent
Title WidthTitle font styleNumber70setTitleWidthgetTitleWidth
Title SizeNumber14setTitleFontSizegetTitleFontSize
Title Colorstring#000000setTitleColorgetTitleColor
Title FontstringsetFontFamilygetFontFamily
Content SizeContent font styleNumber14setContextFontSizegetContextFontSize
Content Colorstringrgba(0, 0, 0, 0.65)setContextColorgetContextColor
Content FontstringsetContextFontFamilygetContextFontFamily
Border WidthBorder styleNumber1setBorderWidthgetBorderWidth
Border TypestringsolidsetBorderStylegetBorderStyle
Border Colorstring#e3e3e3setBorderColorgetBorderColor
Background ColorInput box background colorstring#ffffffsetBackgroundColorgetBackgroundColor
Verification TimeSet when to verifyObject
{ checkTime: 'never', isRequired: 'no' }
setValidityCheckgetValidityCheck
RequiredSet whether is requiredObject
{ checkTime: 'never', isRequired: 'no' }
setValidityCheckgetValidityCheck
Data SourceData source to displayArray[]
  • Example Code
    • Set data source
      // data format
      var data = [{
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [{
      value: 'hangzhou',
      label: 'Hangzhou',
      children: [{
      value: 'xihu',
      label: 'West Lake'
      }]
      }]

      },
      {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [{
      value: 'nanjing',
      label: 'Nanjing',
      children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men'
      }]
      }]

      }];

      var Cascader = scriptUtil.getRegisterReactDom('componentId');
      // import data source
      Cascader.setImportData(data)
    • Get component value
      var Cascader = scriptUtil.getRegisterReactDom('componentId');
      var value = Cascader.getChooseOption()
    • Set component value
      var Cascader = scriptUtil.getRegisterReactDom('componentId');

      var vals = ['zhejiang','hangzhou','xihu']

      Cascader.setValue(vals)
    • Get required verification result
      var Cascader = scriptUtil.getRegisterReactDom('componentId');
      var res = Cascader.getValid(); // true or false

Radio

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value.stringsetFormItemId(value)getFormItemId()
Content SizeContent font stylenumber14setContextFontSizegetContextFontSize
Text Colorstring#000000setTextCheckedColorgetTextCheckedColor
Background ColorSelected background colorstringsetCheckedBackgroundgetCheckedBackground
## MarginDistance between buttonsnumbersetButtonMargingetButtonMargin
Border SizeButton border stylenumbersetButtonBorderWidthgetButtonBorderWidth
Border ColorstringsetButtonBorderColorgetButtonBorderColor
Border Type

'solid' / 'dotted' / 'dashed'

'solid'

setButtonBorderStylegetButtonBorderStyle
Verification TimeWhether to verify the input box or when in operation centerObjectsetValidityCheckgetValidityCheck()
RequiredWhether the drop-down box content is required

'true' / 'false

'false'

setValidityCheckgetValidityCheck().isRequired
Button StyleWhether to enable buttonbooleanfalsesetButtonTypegetButtonType
Vertical AlignmentbooleanfalsesetCutLinegetCutLine
Button BackgroundButton background colorstring#fffsetButtonBackgroundgetButtonBackground
Selected Button ColorSelected button background colorstring#5E71E9setButtonSelectBackgroundgetButtonSelectBackground
Selected Text ColorSelected button font colorstring#fffsetButtonSelectColorgetButtonSelectColor
OptionsobjectsetDataSourcegetDataSource().type
Dynamic DataOptions from binding with object modelsobject-setdataSourcegetdataSource().dynamicDataSource
Static DataManually add optionsobject-setdataSourcegetdataSource().staticDataSource
Link ObjectLink with other elements
Time FormatminData/maxData conversion as input parameter when setting linkagebooleanfalsesetInitFormatgetInitFormat()
  • Example Code
    • Get selected data
      var RadioCtrl = scriptUtil.getRegisterReactDom('component Id');
      RadioCtrl.getValue();
    • Set selected data
      var RadioCtrl = scriptUtil.getRegisterReactDom('component Id');
      RadioCtrl.setValue('XX');
    • Set data
      var data = [
      {
      optionText: 'M',
      optionValue: '1'
      },
      {
      optionText: 'F',
      optionValue: '2'
      }
      ];
      var RadioCtrl = scriptUtil.getRegisterReactDom('component Id');
      RadioCtrl.setObjectData(data);
    • Get form data
      // Get component value in batches after submitting forms
      // formItemId is component name [component name 1, component name 2]
      scriptUtil.getFormData([formItemId]);
    • Set form data
      // Set data in batches to change form data at once
      // formItemId is component name,value is component value

      scriptUtil.setFormData({
      'formItemId':value
      });

Checkbox

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value.stringsetFormItemId(value)getFormItemId()
Content SizeContent font stylenumber14setContextFontSizegetContextFontSize
Content FontstringsetContextFontFamilygetContextFontFamily
Text Colorstring

'rgba(0,0,0,0.65)'

setTextCheckedColorgetTextCheckedColor
Background ColorSelected background colorstring

'' / 'purple' / 'blue'/ 'yellow' / 'green' / 'red'

setCheckedBackgroundgetCheckedBackground
Select AllWhether to enable select allstringnosetHasAllCheckedgetHasAllChecked
CheckboxWhether to display checkboxstringnosetHasIcongetHasIcon
Selected ColorSelected checkbox stylestringsetLabelCheckedColorgetLabelCheckedColor
Selected BackgroundstringsetLabelCheckedBackgroundColorgetLabelCheckedBackgroundColor
Verification TimeWhether to verify the input box or when in operation centerObjectsetValidityCheckgetValidityCheck()
RequiredWhether the drop-down box content is required

'true' / 'false

'false'

setValidityCheckgetValidityCheck().isRequired
OptionsobjectsetDataSourcegetDataSource().type
Dynamic DataOptions from binding with object modelsobject-setdataSourcegetdataSource().dynamicDataSource
Static DataManually add optionsobject-setdataSourcegetdataSource().staticDataSource
Link ObjectLink with other elements
Time FormatminData/maxData conversion as input parameter when setting linkagebooleanfalsesetInitFormatgetInitFormat()
  • Example Code
    • Checkbox data format
      {
      list: [
      {
      optionText: 'M',// display field
      optionValue: '1'// data field
      },
      {
      optionText: 'F',
      optionValue: '2'
      }
      ]
      }
    • Get selected data
      var RadioCtrl = scriptUtil.getRegisterReactDom('component Id');
      RadioCtrl.getValue();
    • Set selected data
      var RadioCtrl = scriptUtil.getRegisterReactDom('component Id');
      RadioCtrl.setValue([1]);
    • Set data
      var data = [
      {
      optionText: 'M',
      optionValue: '1'
      },
      {
      optionText: 'F',
      optionValue: '2'
      }
      ];
      var RadioCtrl = scriptUtil.getRegisterReactDom('component Id');
      RadioCtrl.setObjectData(data);
    • Get form data
      // Get component value in batches after submitting forms
      // formItemId is component name [component name 1, component name 2]
      scriptUtil.getFormData([formItemId]);
    • Set form data
      // Set data in batches to change form data at once

      // formItemId is component name,value is component value

      scriptUtil.setFormData({
      'formItemId':value
      });

Date Picker

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value.stringsetFormItemId(value)getFormItemId()
TitleTitle stylestringtitlesetLabelContent(value)getLabelContent()
Title Widthnumber70setTitleWidth(value)getTitleWidth()
Title Sizenumber14setTitleFontSize(value)getTitleFontSize()
Title FontstringsetFontFamily(value)getFontFamily()
Title Colorstring#000setTitleColor(value)getTitleColor()
Content SizeContent stylenumber14setContextFontSize(value)getContextFontSize()
Content Colorstring#000000a6setContextColor(value)getContextColor()
Content FontstringsetContextFontFamily(value)getContextFontFamily()
Background Colorstring#fffsetBackgroundColor(value)getBackgroundColor()
Border WidthBorder stylenumber1setBorderWidth(value)getBorderWidth()
Border Colorstring#e3e3e3setBorderColor(value)getBorderColor()
Border TypestringsolidsetBorderStyle(value)getBorderStyle()
Verification TimeSet the verification time of the element
{checkTime: "never", isRequired: "no", validType:
"none", customReg: ""}
setValidityCheck(value)getValidityCheck()
Date Typedate
{defaultType: "date", dateType: "date", format:
"YYYY-MM-DD", customFormat: ""}
setDateOpts(value)getDateOpts()
Initial ValueInitial datetimestampsetInitValue(value)getInitValue()
  • Example Code
    • Date data format
      {

      dateType: 'date', // date type includes date, time,datetime, dateRange and datetimeRange
      format: 'YYYY-MM-DD', // date format YYYY-MM-DD YYYY-M-D DD/MM/YYYY and custom
      customFormat: ''

      }
    • Convert timestamp to date
      // '2018-12-28 00:00:00'

      scriptUtil.timestampFormat(1545926400000, 'YYYY-MM-DD HH:mm:ss');
      // '2018-12-28'

      scriptUtil.timestampFormat('1545926400000', 'YYYY-MM-DD');
    • Convert date to timestamp
      // 1543939200000

      scriptUtil.timestampAntiFormat('2018-12-05');
    • Get selected date
      var DatePicker = scriptUtil.getRegisterReactDom('component Id');
      //timestamp:1545926400000
      DatePicker.getValue();
    • Set selected date
      var DatePicker = scriptUtil.getRegisterReactDom('component Id');

      // timestamp
      DatePicker.setValue(1545926400000);

      // date
      DatePicker.setValue(new Date());

      //date string
      DatePicker.setValue('2018-12-01');

      //date range
      DatePicker.setValue(['2018-10-10 10:10:10','2018-11-11 11:11:11']);
    • Whether date passes verification
      var DatePicker = scriptUtil.getRegisterReactDom('component Id');

      DatePicker.getValid();
    • Disable date selection
      /*@params {string} value disable date
      e.g. '2018-10-10' with time:'2018-10-10 10:10:10'
      *
      @params {string} type default is start:cannot
      select date before end:cannot select date after
      */

      var DatePicker = scriptUtil.getRegisterReactDom('componentId');
      DatePicker.setDisabledDate('2018-01-01 10:10:10','start')
    • Disable time selection
      /*@params {string} value disable time
      e.g. '10:10:10'
      *@params {string} type
      default is start:cannot select time before end:cannot select
      time after
      */
      var DatePicker = scriptUtil.getRegisterReactDom('component Id');
      DatePicker.setDisabledTime('10:10:10','start')
    • Get form data
      // Get component value in batches after submitting forms

      // formItemId is component name [component name 1, component name 2]

      scriptUtil.getFormData([formItemId]);
    • Set form data
      // Set data in batches to change form data at once
      // formItemId is component name,value is component value
      scriptUtil.setFormData({
      'formItemId':value
      });

Button

PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value.stringsetFormItemId(value)getFormItemId()
Button TitleButton title stylestringbuttonsetButtonNamegetButtonName
Title Colorstring#000000setTitleColorgetTitleColor
Title FontstringArialsetTitleFontFamilygetTitleFontFamily
Bold

'normal' / 'bold'

normalsetFontWeightgetFontWeight
Title Sizenumber16setTitleFontSizegetTitleFontSize
Border WidthButton border stylenumber1setBorderWidthgetBorderWidth
Border Colorstring#F5F5F5setBorderColorgetBorderColor
Border Type

'solid' / 'dotted' / 'dashed'

'solid'

setBorderStylegetBorderStyle
Corner RadiusButton border corner radiusnumber2setBorderRadiusgetBorderRadius
Button IconButton icon stylestringnonesetIcongetIcon
Custom IconstringnonesetIconUploadgetIconUpload
Icon PositionstringleftsetIconPosgetIconPos
Icon SizestringdefaultsetIconSizegetIconSize
Background ColorButton background colorstring#F5F5F5setBackgroundColorgetBackgroundColor
Hide when PrintWhether to hide icon when printingbooleanfalsesetPrintHiddengetPrintHidden
UnavailableWhether to disable when clickingbooleanfalsesetDisabledgetDisabled

Tree

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value.stringsetFormItemId(value)getFormItemId()
Titlestring

''

setLabelContentgetLabelContent
Search BoxWhether to enable search boxbooleanfalsesetIsSearchgetIsSearch
CollapseWhether to expand the treebooleanfalsesetIsExpendedgetIsExpended
Cancel PermissionWhether the bound object has permissionsbooleanfalsesetIsPermissiongetIsPermission
Select by DefaultWhether to select the first option by defaultbooleanfalsesetisDefaultSelectedgetisDefaultSelected
Selected BackgroundSelected element stylestring#0088CCsetSelectedBgColorgetSelectedBgColor
Selected Text Colorstring#f5f5f5setSelectedFontColorgetSelectedFontColor
Selected Text Sizestring16setSelectedFontSizegetSelectedFontSize
Data Sourceobject-setDataSourcegetDataSource
  • Example Code
    • Get tree node
      var treeCtrl = scriptUtil.getRegisterReactDom('component Id');
    • Dynamic data source format
      {
      list:[
      {
      id:'1',
      name:'parent 1',
      children:[
      {
      id:'1-1',
      name:'child 1'
      }
      ]
      },
      {
      id:'2',
      name:'parent 2',
      children:[
      {
      id:'2-1',
      name:'child 2'
      }
      ]
      }
      ]
      }
    • Set data
      var treeCtrl = scriptUtil.getRegisterReactDom('componentId');
      var data = [
      {
      id:'1',
      name:'parent 1',
      children:[
      {
      id:'1-1',
      name:'child 1'
      }
      ]
      },
      {
      id:'2',
      name:'parent 2',
      children:[
      {
      id:'2-1',
      name:'child 2'
      }
      ]
      }
      ];

      treeCtrl.setImportData(data);
    • Collapse a node by default
      var treeCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      var keys = [ '1' ]

      treeCtrl.defaultExpandedKeys(keys);
    • Select all parent nodes of the current selected node
      var treeCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      treeCtrl.getParentNodes();

    • Manually refresh current data source
      var treeCtrl =
      scriptUtil.getRegisterReactDom('component Id');

      treeCtrl.reloadTreeData();

Single List

ParameterDescription
TitleEnter the input box title.
Title SizeSet the title font size, font and color.
Title Color
Title Font
Border WidthSet width, color and type of the border.
Border Type
Border Color
Line HeightSet the line height of the single list.
Selected ColorThe background color when the list is selected.
Background ColorSet background color of the element.
Confirm IconWhether to display the confirm icon before the list.
Custom IconCustomize the confirm icon.
Data SourceBind an object service for data display.
Link ObjectConfigure data linkages through input parameters of the data source.
Field BindingBind a field in the data source of an element on the canvas, and display it on the list.
FieldSelect a field to be bound for display on the list.
  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value. In forms, it means data key valuesstringsetFormItemIdgetFormItemId
TitleTitle font stylestringsetTitlegetTitle
Title Sizestring16setFontSizegetFontSize
Title Colorstring#000000setFontColorgetFontColor
Border WidthBorder stylenumber1setBorderWidthgetBorderWidth
Border Type

'solid'

setBorderColorgetBorderColor
Border Colorstring#E3E3E3setBorderColorgetBorderColor
Line Heightnumber30setLineHeightStylegetLineHeightStyle
Selected Colorstring#0088CCsetSelectBackgroundColorgetSelectBackgroundColor
Background Colorstring#f5f5f5setBackgroundColorgetBackgroundColor
Confirm IconbooleanfalsesetIsShowIcongetIsShowIcon
Custom IconCustom icon for the buttonstringnonesetIconUploadgetIconUpload
Data SourceDynamic data sourceobjectsetObjectLabelgetsetObjectLabel().dataSource
Link ObjectLink with other elements
Time FormatminData/maxData conversion as input parameter when setting linkagebooleanfalsesetInitFormat(boolean)getInitFormat()
  • Example Code
    • Dynamic data source format
      var data = {
      list: [
      {
      label: 'name',
      value: 'showName'
      },
      {
      label: 'name1',
      value: 'showName1'
      }
      ]
      }
    • Set selected
      var SingleList = scriptUtil.getRegisterReactDom('componentId');
      SingleList.setValue('XXXX');

Table

  • Property Description
Table Property
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID for setting value. In forms, it means data key valuesstringsetFormItemIdgetFormItemId
TitleTable titlestring-setLabelContentgetLabelContent
Font SizeTable title font stylestring#000000setLabelContentFontColorgetLabelContentFontColor
Font Colornumber14setLabelContentFontSizegetLabelContentFontSize
RequiredWhether to verify the table when content changes

'yes' / 'no'

nosetIsRequiredgetIsRequired
Fixed HeaderWhether to set fixed table head

'true' / 'false'

truesetIsFixedHeadergetIsFixedHeader
Column AdjustmentWhether to manually change column widthbooleanfalsesetIsDragChangeWidthgetIsDragChangeWidth
SelectableWhether to add a select option to the table

'true' / 'false'

false'setIsSelectedgetIsSelected
BorderCell border

'true' / 'false'

truesetBordergetBorder
OutlineTable border

'true' / 'false'

truesetBorderOutsetBorderOut
Outline TypeBorder and outline stylenumber1setBorderWidthgetBorderWidth
Outline Colorstring#E8E8E8setBorderColorgetBorderColor
Outline Width

'solid' / 'dotted' / 'dash' 'solid'

setBorderStylegetBorderStyle
Display HeadWhether to display table headbooleanfalsesetHasTheadgetHasThead
Head BackgroundTable head stylestring#6C748DsetTheadBackgroundColorgetTheadBackgroundColor
Font Colorstring#FFFFFFsetTheadFontColorgetTheadFontColor
Font Sizenumber14setTheadFontSizegetTheadFontSize
FontstringArialsetTheadFontFamilygetTheadFontFamily
Table BackgroundTable stylestring#FFFFFFsetTbodyBackgroundColorgetTbodyBackgroundColor
Font Colorstring#000000setTbodyFontColorgetTbodyFontColor
Font Sizenumber14setTbodyFontSizegetTbodyFontSize
FontstringArialsetTbodyFontFamilygetTbodyFontFamily
Table HeightTable cell heightnumber44setTdHeightgetTdHeight
Odd Line Colorstring#FFFFFFsetSingleRowColorgetSingleRowColor
Even Line Colorstring#FFFFFFsetDoubleRowColorgetDoubleRowColor
Scroll Bar Backgroundbackground color of the scroll barbooleanfalsesetIsTransparentgetIsTransparent
Scroll WidthScroll bar width. Must be larger than component widthnumber0setTableXgetTableX
Data Sourceobject-setObjectgetObject
PaginationWhether to enable pagination

'true' / 'false' 'true'

setIsPaginationgetIsPagination
Lines Per PagepageSizenumber5setPageSize
ImportbooleanfalsesetIsImportgetIsImport
ExportbooleanfalsesetIsExportgetIsExport
Import/Export Style(image/button)

'image' / 'button'

imagesetPortStyle
Toolbar ColorToolbar of import and export colorstring#6C748DsetImportAndExportBackgroundgetImportAndExportBackground
Import/Export ComplexWhether to enable complex mode of import and exportobjectfalsesetComplexConfig(object)getComplexConfig().isComplex
Import pathImport path under complex modestringsetComplexConfig(object)getComplexConfig().complexImportUrl
Export pathExport path under complex modestringsetComplexConfig(object)getComplexConfig().complexExportUrl
Link ObjectLink with other elements
Time FormatminData/maxData conversion as input parameter when setting linkagebooleanfalsesetInitFormat(boolean)getInitFormat()
Head ConfigArrayAll return data
Timed RefreshbooleanfalsesetIsTiminggetIsTiming
Refresh FrequencyFrequency of timed refreshnumbersetDelayTimegetDelayTime
Page Configuration
PropertyKeyDescriptionTypeDefault
FieldoriginalNameReturned field key value.string
Display NamecustomNameDisplay name corresponding to keystring
WidthwidthColumn widthnumber
AlignmentalignAlignment of table head and bodystringleft
TipshasTipsSet whether to display tipsstringno
Data Typetypestring-
Data RenderingrenderData after secondary rendering. Input parameter includes text, row, index, table
function(text,row,index,table){ return text;}
-
FilterisFilterWhether to support filtering at the backend
SortingsorterBWhether to support sorting at the backend-

'String'

Script Configuration
PropertyKeyDescriptionTypeDefault
FieldoriginalNameReturned field key value.string
Display NamecustomNameDisplay name corresponding to keystring
WidthwidthColumn widthnumber
AlignmentalignAlignment of table head and bodystringleft
TipshasTipsSet whether to display tipsstringno
Data Typetypestring-
Data RenderingrenderData after secondary rendering. Input parameter includes text, row, index, table
function(text,row,index,table){ return text;}
-
FilterisFilterWhether to support filtering at the backend
Inline EditeditableWhether to enable inline editstring, booleanfalse
Inline Edit TypeformTypestring
Inline Edit Data SourceformTypeSource

When inline edit type is 'Select', data in each line is the same. e.g. [{"code":"11"},{"code":"22"}]

function(){ return Array; }
-
Get Dynamic Data InlineformTypeSourceFnWhen inline edit type is 'Select', data in each line is different
function(){ return Array; }
-
Inline Edit Callback (handleSave)handleSaveCallback events when the focus is on inline edit or not
function(originalName, row){ // operations aftergetting or losing focus
}
-
Save Inline EditisHandleSaveWhether to execute callback events when the focus is on inline edit or not.
function(originalName, row, tableData){ // promise or return true/false
}
return true;
Enable Inline EditisEditFnWhether to enable inline edit for rows that support inline edit.
function(row){ return true;}
return true;
Required Inline EditisRequiredWhether to require inline edit fieldsstring/booleanfalse
  • Example Code
    • Set table head
      var table = scriptUtil.getRegisterReactDom('componnetId');
      var columnHeader = [
      {
      customName: 'index',
      originalName: '_index',
      align:'left',
      width: 100
      },
      {
      customName: 'name',
      originalName: 'name',
      align:'left',
      isFilter: true, // filter
      sorterB: true,// sorting
      // custom render
      render: function(text,row,index,table){
      console.log(text,row,index,table);
      return '<span>name:'+text+'</span>';
      }
      },
      {
      customName: 'birthday',
      originalName: 'birthday',
      align:'left'
      },
      {
      customName: 'age',
      originalName: 'age',
      align:'left',
      editable: true, // inline edit
      handleSave: function(row){
      console.log('save inline edit', row);
      },
      isHandleSave: function(originalName, row, tableData) {
      console.log('whether to save inline edit',originalName, row, tableData);
      return true;
      },
      isEditFn: function(keyItem){
      console.log('keyItem', keyItem);
      return true;
      },
      isRequired: true
      },
      {
      customName:'operation',
      originalName:'operation',
      align:'left'
      }
      ];

      table.setColumnHeader(columnHeader);
    • Set data source
      var table = scriptUtil.getRegisterReactDom('componnetId');
      var rows = {
      list: [
      {
      index: '1',
      id: 'H111',
      name:'container',
      nickName: 'material name',
      request: 1
      },
      {
      index: '3',
      id: 'H112',
      name: 'trash box',
      nickName: 'material name',
      request: 1
      },
      {
      index: '2',
      id: 'H110',
      name: 'container',
      nickName: 'material name',
      request: 1
      },
      {
      index: '4',
      id: 'H111',
      name: 'industrial box',
      nickName: 'material name',
      request: 1
      },
      ],
      // pagination is optional
      pagination:{
      current:1,
      pageSize:1,
      total:5
      }
      };

      table.setObjectSource(rows);
    • Set operation column
      var table = scriptUtil.getRegisterReactDom('component id');
      var columnOperation = [
      {
      name:'edit',
      modalUrl:'page_id',
      modalTitle:'edit',
      modalWidth: 1000,
      modalHeight: 700,
      params:['id'], // url of the pop-up windows contains page id
      },
      {
      name:'delete',
      click:function(row, index, tableData){
      console.log('delete', row, index, tableData);
      },
      isRenderFn: function(row){
      return true;
      },
      style: {
      backgroundColor:'#eacd4a',
      color:'#fff'
      }
      }
      ];
      table.setColumnOperation(columnOperation);

    • Set column cell
      var table = scriptUtil.getRegisterReactDom('组件id');
      var cellConfig={
      name: {
      modalUrl:'pageId',
      modalWidth:1000,
      style:{
      color:'#eacd4a'
      },
      },
      age: {
      style:{
      backgroundColor:'#eacd4a',
      color:'#fff'
      },
      // click event
      onClick: function(row, tableData){
      console.log('click the cell', row, tableData);
      },
      // jump to new page
      hrefUrl:'http://www.baidu.com'
      }
      };

      table.setCellConfig(cellConfig);
    • Set pagination
      var table = scriptUtil.getRegisterReactDom('componentId');
      var onChange=function(pangation,filters,sorter){
      console.log(pangation,filters,sorter);
      // get date through the page, update data. pangation update by page
      // pangation {current: 1, pageSize: 1, total: 5}
      // filters
      // sorter {column:{},field:"request",order:"descend"}

      // request interface todo
      // get data todo

      // fill data into the table
      table.setObjectSource(row);
      }

      table.setTableOnChange(onChange);
    • Get selected component
      var table = scriptUtil.getRegisterReactDom('component id');
      var selects = table.getSelectedRows();
    • Get current row
      var table = scriptUtil.getRegisterReactDom('component id');
      var curRow = table.getCurRow();
    • Get current data source
      var table = scriptUtil.getRegisterReactDom('component id');
      var tableData = table.getObjectSource();
    • Get data again
      // Only works when there is bound data source
      var table = scriptUtil.getRegisterReactDom('component id');
      table.reloadTableData();

Picture

  • Property Description
PropertyTypeDefaultSet ValueGet Value
TypeStringpicturesetTypegetType
Aspect RatioStringsetImgUploadgetImgUpload
Picture URLStringwidthsetRatiogetRatio
  • Example Code
// get element with an Id as ImgUpload-1

var ImgUpload =
scriptUtil.getRegisterReactDom('ImgUpload-1')

// define a relative path that contains images

var imgUrl =
'https://pss.bdstatic.com/r/www/cache/static/protocol/https/global/img/bao_02f5d40.jpg'


// manually set image path

ImgUpload.setValue(imgUrl)

Bookmark Page

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
Component NameID of linked componentstringsetFormItemIdgetFormItemId
OptionsobjectdynamicsetdataSource(Object)getdataSource().type
Dynamic DataOptions from binding with object modelsobject-setdataSource(Object)getdataSource().dynamicDataSource
Static DataManually add optionsobject-setdataSource(Object)getdataSource().staticDataSource
Time FormatbooleanfalsesetInitFormat()getInitFormat
  • Example Code
    • Data format
      [
      {
      key:'tab1',// only identifier (required)
      optionText: 'label1',// tab name
      optionPageValue: 'https://www.baidu.com?key=1'// tab url. you can add parameters in the url to link corresponding events. e.g. 'https://www.baidu.com?name=lisi&amp;age=18'
      },
      {
      key:'tab2',
      optionText: 'label2',
      optionPageValue: 'https://www.baidu.com?key=2'
      },
      {
      key:'tab3',
      optionText: 'label3',
      optionPageValue: 'https://www.baidu.com?key=3'
      }
      ];
    • Import data source
      //data format
      scriptUtil.getRegisterReactDom('componentId').setImportData(data)

    • Get selected tabs
      scriptUtil.getRegisterReactDom('componentId').getChooseOption()
    • Return data format
      {
      key:'tab2',
      optionText: 'label 2',
      optionPageValue: 'https://www.baidu.com?key=2'
      }
    • Set current tab
      scriptUtil.getRegisterReactDom('componentId').setActiveKey(key)// key corrsponds to the only identifier of the tab

Upload

  • Property Description
PropertyDescriptionTypeDefaultSet ValueGet Value
TitleReminder text in the buttonStringuploadsetLabelContentgetLabelContent
RequiredStringnosetIsRequiredgetIsRequired
Multi SelectWhether to enable multi-selection when uploadingBooleanfalsesetMultiplegetMultiple
Display ListWhether to display file listBooleantruesetShowListgetShowList
Upload TypeString*setAcceptTypegetAcceptType
List TypeStringtextsetListTypegetListType
Max. UploadNumber-1 (no limit)setLimitNumgetLimitNum
Read OnlyBooleanfalsesetReadOnlygetReadOnly
  • Example Code
    • Set value
      var instance = scriptUtil.getRegisterReactDom('componentId');
      var fileList = [
      {
      "fileDownloadUrl":"/api/config/download?fileName=2022-03-09/1646832614807/file.png",
      "fileName": "2022-03-09/1646832614807/uploadcomponent.png"
      },
      ]
      instance.setValue(fileList);
      // set data value in batches to change form data at once
      scriptUtil.setFormData({ 'component name 1':fileList, 'component name 2': fileList })
    • Get value
      var instance = scriptUtil.getRegisterReactDom('componentId');
      instance.getValue();
      // get element value by element name in batches
      var data = scriptUtil.getFormData(['component name1','component name 2']);
PropertyDescriptionTypeDefaultSet ValueGet Value
Data InterfaceSearch interface typeString
Request AddressInterface address that supports searchObjectsetSelectApigetSelectApi
Request MethodRequest method of the searchStringGET
Search FieldSearching keywordStringkeyword
Item FieldField name of pageSizeStringpageSize
Display VolumeLines in a pageNumber10
Display FieldDisplay field name corresponding to return contentStringsetItemValuegetItemValue
Field ValueField identifier corresponding to return content. Must be uniqueStringsetItemKeygetItemKey
TitleTitle of the input boxStringtitlesetLabelContentgetLabelContent
PlaceholderPlaceholder of the input boxStringsetPlaceholdergetPlaceholder
Title WidthTitle styleNumber70setTitleWidthgetTitleWidth
Title SizeNumber14setTitleFontSizegetTitleFontSize
Title ColorString#000000setTitleColorgetTitleColor
Title FontStringArialsetFontFamilygetFontFamily
Content SizeContent styleNumber14setContextFontSizegetContextFontSize
Content ColorStringrgba(0, 0, 0, 0.65)setContextColorgetContextColor
Content FontStringsetContextFontFamilygetContextFontFamily
Border TypeBorder styleNumber1setBorderWidthgetBorderWidth
Border ColorString#e3e3e3setBorderColorgetBorderColor
Border WidthStringsolidsetBorderStylegetBorderStyle
Background ColorBackground color of the input boxString#ffffffsetBackgroundColorgetBackgroundColor